import {Image, ScrollView, Swiper, SwiperItem, Text, View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './hotShopModule.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import rightIcon from '@/assets/image/index/right.png';
import bg from '@/assets/indexPage/bg.png';
type IShopProps = T.IProps & T.IShopProps;
//@ts-ignore
@connect<Partial<IShopProps>, T.IShopState>(store2Props, actions)
export default class Info extends Component<Partial<IShopProps>, T.IShopState> {
  constructor(props: IShopProps) {
    super(props);
    this.state = {
      shopList: [], //秒杀商品
      banner: [],
    };
  }

  renderItem() {
    let {
      main: {shopList, shopLists},
    } = this.props;
    let ViewItem = [];
    let arrs = [];
    shopList.map((item, index) => {
      shopLists.map((item1, index1) => {
        if (item.skuId == item1.id) {
          arrs.push(item1);
        }
      });
    });
    arrs.map((item, index) => {
      if (index <= 1) {
        ViewItem.push(
          <View className="item_box" onClick={() => this.itemClick(item.goodsInfo.goodsInfoId)}>
            <Image src={item.goodsInfo.goodsInfoImg} className="goodsInfoImg" />
            <Text className="goodsInfoName">{item.goodsInfo.goodsInfoName}</Text>
            <View
              style={{
                flexDirection: 'row',
                alignContent: 'center',
              }}
            >
              <Text style={{fontSize: '22rpx', color: 'rgb(250,41,44)'}}>
                ¥
                <Text style={{fontSize: '32rpx', fontWeight: 'bold', color: 'rgb(250,41,44)'}}>
                  {item.goodsInfo.marketPrice}
                </Text>
              </Text>
              {/* <Text style={{ fontSize: '22rpx', textDecorationLine: 'line-through', color: '#999999' }}>
                {item.goodsInfo.marketPrice ? '¥' : ''}
                <Text style={{ fontSize: '32rpx', paddingLeft: '8rpx' }}>
                  {item.goodsInfo.marketPrice ? item.goodsInfo.marketPrice : ''}
                </Text>
              </Text> */}
            </View>
          </View>,
        );
      }
    });
    return ViewItem;
  }

  async itemClick(id) {
    let itemStr = Taro.getStorageSync('b2b-wechat@login');
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return;
    }
    //跳转商品详情页面
    Taro.navigateTo({
      url: `/pages/package-B/goods/goods-details/index?skuId=${id}`,
    });
  }

  bannerClick(url) {
    let itemStr = Taro.getStorageSync('b2b-wechat@login');
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return;
    }
    if (url.indexOf('jsruiyin.com/mobile/') != -1) {
      let arr = url.split('jsruiyin.com/mobile');
      console.log(arr[1]);
      Taro.navigateTo({
        url: arr[1],
      });
    }
  }

  //秒杀专区
  fsClick(item) {
    let {
      main: {shopList},
    } = this.props;
    let storeId = Taro.getStorageSync('storeId');
    let itemStr = Taro.getStorageSync('b2b-wechat@login');
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return;
    }
    Taro.navigateTo({
      url: `/pages/package-B/x-site/page-link/index?pageType=${JSON.parse(item.link).app.params.pageType}&pageCode=${
        JSON.parse(item.link).app.params.pageCode
      }&storeId=${storeId}`,
    });
  }

  render() {
    let {
      main: {goodShops, shopList, shopLists, banner},
    } = this.props;
    return (
      <View className="PageIndexHotShop">
        <View className="left" style={{backgroundImage: `url(${bg})`}}>
          <View
            className="t_box"
            onClick={() => {
              this.fsClick(goodShops[2].props);
            }}
          >
            <View className="row">
              <Text className="l_title">限时秒杀</Text>
            </View>
            <View className="row" style={{justifyContent: 'center'}}>
              <Text className="more">更多</Text>
              <View style={{alignContent: 'center', justifyContent: 'center'}}>
                <Image className="r_img" mode="widthFix" src={rightIcon} />
              </View>
            </View>
          </View>
          <View className="listBox">{shopList.length > 0 && shopLists.length > 0 && this.renderItem()}</View>
        </View>
        <View className="right">
          {banner.length > 0 && (
            <Swiper
              indicatorColor="rgba(0,0,0,0.1)"
              indicatorActiveColor="#fff"
              circular
              indicatorDots
              autoplay
              className="banner-swiper"
            >
              {banner.map((item) => {
                return (
                  <SwiperItem>
                    <View
                      onClick={() => {
                        if (item.url) {
                          this.bannerClick(item.url);
                        }
                      }}
                    >
                      <Image src={item.file} className="banner" mode="aspectFill" />
                    </View>
                  </SwiperItem>
                );
              })}
            </Swiper>
          )}
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
